<template>
  <div>
    <!-- 2.4 判断是添加还是编辑 -->
    <el-dialog @close="close" :title="status.isAdd? '角色添加' : '角色编辑'" :visible.sync="status.isshow">
      <el-form :model="form">
        {{form}}
        <el-form-item label="角色名称" :label-width="formLabelWidth">
          <el-input v-model="form.rolename" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <!-- 树形图 -->

          <el-tree
            :data="treeList"
            show-checkbox
            default-expand-all
            node-key="id"
            :props="{ children: 'children', label: 'title'}"
            ref="tree"
          ></el-tree>
        </el-form-item>
        <!--状态 -->
        <el-form-item label="状态" label-width="120px">
          <el-switch v-model="form.status" :active-value="1" :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="add" v-if="status.isAdd">添 加</el-button>
        <el-button type="primary" v-else @click="update">修 改</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqroleadd,
  reqmenulist,
  reqroleinfo,
  reqroleedit
} from "../../../http/api";
import { successAlert, errorAlert } from "../../../utils/alert";
import { mapGetters, mapActions } from "vuex";
export default {
  // 2.3 子组件接收从父组件传来的status
  props: ["status", "list"],
  data() {
    return {
      value: "1",
      dialogFormVisible: true,
      formLabelWidth: "120px",
      treeList: [],

      // 3.1 初始化数据
      form: {
        rolename: "",
        menus: "",
        status: 1
      }
    };
  },
  mounted() {
    // 1.一进页面就请求菜单数据
    reqmenulist({
      istree: true
    }).then(res => {
      if (res.data.code == 200) {
        this.treeList = res.data.list ? res.data.list : [];
      }
    });
  },
  methods: {
    ...mapActions({
      changeInfo: "changeInfo"
    }),
    // 2.9 点击了取消
    cancel() {
      // 因为传过来的status是个引用类型，所以可以在这里直接操作，但不能修改
      this.status.isshow = false;
    },
    // 3.3 清空form
    empty() {
      this.form = {
        rolename: "",
        menus: "",
        status: ""
      };
      // 单独处理树形的清空
      this.$refs.tree.setCheckedKeys([]);
    },
    // 验空
    changeDate() {
      return new Promise(resolve => {
        // 验空
        if (this.form.rolename == "") {
          errorAlert("角色名称不能为空");
          return;
        }
        if (this.$refs.tree.getCheckedKeys().length === 0) {
          errorAlert("角色权限不能为空");
          return;
        }
        resolve();
      });
    },
    // 3.2 点击了添加
    add() {
      this.changeDate().then(() => {
        // 3.3 现将树形控件上的数据取出来赋给form的menus
        // 但由于是要字符串的，所以要把他转为字符串的
        // this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
        this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
        // console.log(this.$refs.tree.getCheckedKeys());
        // console.log(this.form.menus);
        // 发添加的请求
        reqroleadd(this.form).then(res => {
          if (res.data.code == 200) {
            // 1.弹成功
            successAlert(res.data.msg);
            // 2.清空form
            this.empty();
            // 3.弹框消失
            this.status.isshow = false;
            //4.列表重新渲染
            this.$emit("init");
          }
        });
      });
    },
    //3.7 点击了编辑，获取一条数据
    getOne(id) {
      // 发请求
      reqroleinfo({
        id: id
      }).then(res => {
        if (res.data.code == 200) {
          // menus: "[20,22,23,24,21,25]";rolename: "超级管理";status: 1
          this.form = res.data.list;
          // 由于没有id,补id
          this.form.id = id;
          // 给树赋值
          this.$refs.tree.setCheckedKeys(JSON.parse(this.form.menus));
        }
      });
    },
    // 3.8 点击了修改
    update() {
      this.changeDate().then(() => {
        this.form.menus = JSON.stringify(this.$refs.tree.getCheckedKeys());
        // 发请求
        reqroleedit(this.form).then(res => {
          if (res.data.code == 200) {
            // 1.弹成功
            successAlert(res.data.msg);
            //验证一下刚刚修改的角色是不是当前登录用户所属的角色，如果是，就要清除用户信息，并退出登录
            if (this.form.id === this.info.roleid) {
              // 清除数据
              this.changeInfo({});
              //  跳转到登录页面
              this.$router.push("/login");
              return;
            }

            // 2.清空form
            this.empty();
            //3.弹框消失
            this.status.isshow = false;
            // 4.重新渲染
            this.$emit("init");
          }
        });
      });
    },
    // 3.9 关闭弹窗的bug
    close() {
      // 我们希望点击了添加之后，取消，在点击添加，数据还在，但点击了编辑之后，取消后点击添加，清空内容
      // 给弹框添加close关闭事件---如果是添加的取消，什么都不做；如果是编辑的取消，form清空
      if (!this.status.isAdd) {
        this.empty();
      }
    }
  },
  computed: {
    ...mapGetters(["info"])
  }
};
</script>

<style>
</style>